<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Copyright (c) 2007. Adobe Systems Incorporated. All rights reserved. -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Spry Tooltip Widget Sample</title>
<script language="JavaScript" type="text/javascript" src="../../includes/xpath.js"></script>
<script language="JavaScript" type="text/javascript" src="../../includes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript" src="../../widgets/tooltip/SpryTooltip.js"></script>
<link href="../../widgets/tooltip/SpryTooltip.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#multipleSample, .multipleSample2 {
	width: 300px;
	float: left;
}
#tooltipMultipleSample {
	border: 1px;
	width: 400px;
}
#classonme {
	width: 150px;
	height: 120px;
}
#classonme.enlarge {
	width: 160px;
	height: 130px;
	border: 2px solid red;
}
.optionName, .optionValue {
	font-weight: bold;
	font-size: 14px;
	color: red;
}
.optionValue {
	color: blue;
}
</style>
<script type="text/javascript">
	var dsStates = new Spry.Data.XMLDataSet("../../data/states/states.xml", "states/state");
</script>
<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h3>Spry Tooltip Widget</h3>
<p> This page  highlights the capabilities of the Spry Tooltip Widget. By default the widget will need to receive the id of the hidden element to be displayed when the mouse will move over the trigger elements. The trigger elements are sent in the widget constructor as CSS selectors. To see a sample of using Spry Data and the Tooltip widget, check this <a href="../data_region/TooltipwithData.html">page</a>.</p>
<p>The widget supports a limited list of CSS selectors. You can use class names, element ids and element HTML tags or any combination of these.</p>
<!-- 
	
	Sample 1: Default widget behaviour
	
-->
<p>The tooltip may contain anything from simple text to complex HTML:</p>
<p><span id="firstTooltipTrigger"><strong>Mouse over me for simple tooltip</strong></span> or <span class="secondTooltipTrigger"><strong>Mouse over me for complex tooltip</strong></span></p>
<!-- Tooltip  -->
<p id="firstTooltip" class="tooltipContent">I'm a simple tooltip</p>
<!-- Tooltip complex HTML -->
<div id="secondTooltip" class="tooltipContent" style="width:500px;">
  <p>Egypt is  the <a href="http://en.wikipedia.org/wiki/Countries_by_population" title="Countries by population">fifteenth most populous country</a> in the world. The vast majority of its 78.8 million population (2006) <a href="http://en.wikipedia.org/wiki/Egypt#_note-Factbook" title="">[1]</a> live near the banks of the <a href="http://en.wikipedia.org/wiki/Nile_River" title="Nile River">Nile River</a> (about 40,000&nbsp;km&sup2; or 15,450&nbsp;sq miles) where the only <a href="http://en.wikipedia.org/wiki/Arable" title="Arable">arable</a> agricultural land is found.The regularity and richness of the annual 
    Nile River flood, coupled  with semi-isolation provided by deserts to 
    the east and west, allowed  for the development of one of the world's
    great civilizations. <img src="../../demos/gallery/galleries/egypt/thumbnails/egypt_02.jpg" hspace="4" align="left" alt="Pyramids of Egypt" /> A unified kingdom arose circa 3200 B.C., and a series of dynasties 
    ruled  in Egypt for the next three millennia. The last native dynasty 
    fell to  the Persians in 341 B.C., who in turn were replaced by the 
    Greeks,  Romans, and Byzantines. </p>
  <p>It was the Arabs who introduced Islam and the  Arabic language 
    in the 7th century and who ruled for the next six  centuries. A local 
    military caste, the Mamluks took control about 1250  and <img src="../../demos/gallery/galleries/egypt/thumbnails/egypt_06.jpg" hspace="4" align="right"  alt="Pyramids of Egypt" /> continued to govern after the conquest of Egypt by the Ottoman Turks 
    in 1517. Following the completion of the Suez Canal in 1869, Egypt 
    became an important world transportation hub, but also fell  heavily 
    into debt.</p>
</div>
<hr />
<script type="text/javascript">
	var static_tooltip = new Spry.Widget.Tooltip('firstTooltip', '#firstTooltipTrigger');
	var static_complex_tooltip = new Spry.Widget.Tooltip('secondTooltip', '.secondTooltipTrigger');
</script>
<!--

Sample 2: Have a single tooltip and multiple triggers

-->
<h4>Using CSS Selectors to determine the trigger</h4>
<p>You can use CSS selectors to specify a single trigger or multiple triggers for the same tooltip. In this case, the tooltip looks for 2 page element with 'selectMe' class applied to them.</p>
<pre>&lt;script type=&quot;text/javascript&quot;&gt;
 var multiple_tooltip = new Spry.Widget.Tooltip('tooltipMultipleSample', '#multipleSample .selectMe');
 var multiple_tooltip2 = new Spry.Widget.Tooltip('tooltipMultipleSample2', '.multipleSample2 .selectMe');
 &lt;/script&gt;</pre>
<div id="multipleSample">
  <div class="selectMe">I'm the first trigger</div>
  <div class="selectMe">I'm the second trigger</div>
  <div class="selectMe">I'm the third trigger</div>
</div>
<table id="tooltipMultipleSample" class="tooltipContent">
  <tr>
    <td>Adobe Photoshop CS2</td>
    <td>Adobe&reg; Photoshop&reg; CS2 software, the professional 
      image-editing standard and leader of the Photoshop digital imaging line, delivers more of
      what you crave. Groundbreaking creative tools help you achieve extraordinary results. 
      Unprecedented adaptability lets you custom-fit Photoshop to the way you work. And with 
      more efficient editing, processing, and file handling, there's no slowing you down.</td>
  </tr>
  <tr>
    <td>Adobe Dreamweaver CS3</td>
    <td>With Adobe&reg; Dreamweaver&reg; CS3, web developers 
      go from start to finish, creating and maintaining basic web sites to advanced applications 
      that support best practices and the latest technologies.</td>
  </tr>
</table>
<div class="multipleSample2">
  <ul>
    <li class="selectMe">I'm the first trigger with the same class</li>
    <li class="selectMe">I'm the second trigger with the same class</li>
    <li class="selectMe">I'm the third trigger with the same class</li>
  </ul>
</div>
<img src="../../demos/gallery/galleries/paris/thumbnails/paris_04.jpg" alt="Lions" title="Lions" id="tooltipMultipleSample2" />
<script type="text/javascript">
	var multiple_tooltip = new Spry.Widget.Tooltip('tooltipMultipleSample', '#multipleSample .selectMe');
	var multiple_tooltip2 = new Spry.Widget.Tooltip('tooltipMultipleSample2', '.multipleSample2 .selectMe');
</script>
<hr style="clear: both"/>
<!--

Sample 3: Show and Hide delayed

-->
<h4>Delays</h4>
<p>By default, the tooltip shows up immediately. You can set delays to slow down the showing and hiding of the tooltip. These are set as an option in the constructor.</p>
<pre>&lt;script type=&quot;text/javascript&quot;&gt;
 var showDelay_tooltip = new Spry.Widget.Tooltip('showDelay', '#showDelayTrigger', <span class="highlited">{showDelay: 2000}</span>);
 var hideDelay_tooltip = new Spry.Widget.Tooltip('hideDelay', '#hideDelayTrigger', <span class="highlited">{hideDelay: 1000}</span>);
&lt;/script&gt;</pre>
<div><span id="showDelayTrigger"><strong><em>Keep the mouse over for 1 second</em></strong></span> or <span id="hideDelayTrigger"><strong><em>the tooltip can close with a delay</em></strong></span>.</div>
<div id="showDelay" class="tooltipContent">And you'll see the tooltip.</div>
<div id="hideDelay" class="tooltipContent">I will display longer.</div>
<script type="text/javascript">
	var showDelay_tooltip = new Spry.Widget.Tooltip('showDelay', '#showDelayTrigger', {showDelay: 1000});
	var hideDelay_tooltip = new Spry.Widget.Tooltip('hideDelay', '#hideDelayTrigger', {hideDelay: 2000});
</script>
<hr style="clear: both"/>
<!--

Sample 4: Apply a class on the trigger

-->
<h4>Class on trigger</h4>
<p>In this sample, a CSS class is set on the trigger to alert the user that something happens on the element. This is set as an option in the constructor.</p>
<pre>&lt;script type=&quot;text/javascript&quot;&gt;
 var highlight_tooltip = new Spry.Widget.Tooltip('highlighttrigger', '#classonme', {hideDelay:500, <span class="highlited">hoverClass:&quot;enlarge&quot;</span>})
 &lt;/script&gt;</pre>
<img src="../../demos/gallery/galleries/egypt/images/egypt_01.jpg" alt="" title="" id="classonme" /> <span id="highlighttrigger" class="tooltipContent">Pyramids of Giza</span>
<script type="text/javascript">
	var highlight_tooltip = new Spry.Widget.Tooltip('highlighttrigger', '#classonme', {hideDelay:500, hoverClass:"enlarge"})
</script>
<hr style="clear: both"/>
<!--

Sample 5: Positioning the tooltip depending on mouse entering position

-->
<h4>Tooltip positioning</h4>
<p>By default, the tooltip is positioned 20px lower and to the right of the cursor. Setting the offsetX and offsetY allows you to set a new position for the tooltip. Pixels are measured from the cursor, not the original tooltip origin. The position indicates the top, left position of the tooltip element.</p>
<p><a href="#" id="triggerOne">Positioned up and to the left</a> | <a href="#" id="triggerTwo">Positioned to the left and same height as cursor</a></p>
<pre>
&lt;script type="text/javascript"&gt;
    var positioned_tooltip = new Spry.Widget.Tooltip('option', '#option', {showDelay: 500, <span class="highlited">offsetX: -30, offsetY: -30})</span>;
    var positioned2_tooltip = new Spry.Widget.Tooltip('optionValue', '#optionValue', {showDelay: 500, <span class="highlited">offsetX: "-200px", offsetY: "0px"})</span>;
&lt;/script&gt;
</pre>
<div class="tooltipContent" id="option"> This is above the cursor and to the left. </div>
<div class="tooltipContent" id="optionValue"> This is left of the cursor and at the same height. </div>
<script type="text/javascript">
	var positioned_tooltip = new Spry.Widget.Tooltip('option', '#triggerOne', {showDelay: 500, offsetX: -30, offsetY: -30});
	var positioned2_tooltip = new Spry.Widget.Tooltip('optionValue', '#triggerTwo', {showDelay: 500, offsetX: "-200px", offsetY: "0px"});
</script>
<hr />
<!--

Sample 6: The tooltip can be animated

-->
<h4>Tooltip animation</h4>
<p>The tooltip widget contains 2 built in effects for opening the tooltip: Fade and Blind. Set these as an option in the constructor. The values of the effects are hard coded and cannot be changed.</p>
<pre>&lt;script type=&quot;text/javascript&quot;&gt;
 var fadeTooltip = new Spry.Widget.Tooltip('fadeMe', '#fadeTrigger', {<span class="highlited">useEffect: 'Fade'</span>});
 var blindTooltip = new Spry.Widget.Tooltip('blindMe', '#blindTrigger', {<span class="highlited">useEffect: 'Blind'</span>});
&lt;/script&gt;</pre>
<p><a href="#" onclick="return false;" id="fadeTrigger">Fade</a> and <a href="#" onclick="return false;" id="blindTrigger">Blind</a></p>
<div id="fadeMe" class="tooltipContent" style="width:500px;">
  <p>Egypt is  the <a href="http://en.wikipedia.org/wiki/Countries_by_population" title="Countries by population">fifteenth most populous country</a> in the world. The vast majority of its 78.8 million population (2006) <a href="http://en.wikipedia.org/wiki/Egypt#_note-Factbook" title="">[1]</a> live near the banks of the <a href="http://en.wikipedia.org/wiki/Nile_River" title="Nile River">Nile River</a> (about 40,000&nbsp;km&sup2; or 15,450&nbsp;sq miles) where the only <a href="http://en.wikipedia.org/wiki/Arable" title="Arable">arable</a> agricultural land is found.The regularity and richness of the annual 
    Nile River flood, coupled  with semi-isolation provided by deserts to 
    the east and west, allowed  for the development of one of the world's
    great civilizations. <img src="../../demos/gallery/galleries/egypt/thumbnails/egypt_02.jpg" hspace="4" align="left" alt="Pyramids of Egypt" /> A unified kingdom arose circa 3200 B.C., and a series of dynasties 
    ruled  in Egypt for the next three millennia. The last native dynasty 
    fell to  the Persians in 341 B.C., who in turn were replaced by the 
    Greeks,  Romans, and Byzantines. </p>
  <p>It was the Arabs who introduced Islam and the  Arabic language 
    in the 7th century and who ruled for the next six  centuries. A local 
    military caste, the Mamluks took control about 1250  and <img src="../../demos/gallery/galleries/egypt/thumbnails/egypt_06.jpg" hspace="4" align="right"  alt="Pyramids of Egypt" /> continued to govern after the conquest of Egypt by the Ottoman Turks 
    in 1517. Following the completion of the Suez Canal in 1869, Egypt 
    became an important world transportation hub, but also fell  heavily 
    into debt.</p>
</div>
<div id="blindMe" class="tooltipContent" style="width:500px;">
  <p>Egypt is  the <a href="http://en.wikipedia.org/wiki/Countries_by_population" title="Countries by population">fifteenth most populous country</a> in the world. The vast majority of its 78.8 million population (2006) <a href="http://en.wikipedia.org/wiki/Egypt#_note-Factbook" title="">[1]</a> live near the banks of the <a href="http://en.wikipedia.org/wiki/Nile_River" title="Nile River">Nile River</a> (about 40,000&nbsp;km&sup2; or 15,450&nbsp;sq miles) where the only <a href="http://en.wikipedia.org/wiki/Arable" title="Arable">arable</a> agricultural land is found.The regularity and richness of the annual 
    Nile River flood, coupled  with semi-isolation provided by deserts to 
    the east and west, allowed  for the development of one of the world's
    great civilizations. <img src="../../demos/gallery/galleries/egypt/thumbnails/egypt_02.jpg" hspace="4" align="left" alt="Pyramids of Egypt" /> A unified kingdom arose circa 3200 B.C., and a series of dynasties 
    ruled  in Egypt for the next three millennia. The last native dynasty 
    fell to  the Persians in 341 B.C., who in turn were replaced by the 
    Greeks,  Romans, and Byzantines. </p>
  <p>It was the Arabs who introduced Islam and the  Arabic language 
    in the 7th century and who ruled for the next six  centuries. A local 
    military caste, the Mamluks took control about 1250  and <img src="../../demos/gallery/galleries/egypt/thumbnails/egypt_06.jpg" hspace="4" align="right"  alt="Pyramids of Egypt" /> continued to govern after the conquest of Egypt by the Ottoman Turks 
    in 1517. Following the completion of the Suez Canal in 1869, Egypt 
    became an important world transportation hub, but also fell  heavily 
    into debt.</p>
</div>
<hr />
<script type="text/javascript">
	var fadeTooltip = new Spry.Widget.Tooltip('fadeMe', '#fadeTrigger', {useEffect: 'Fade'});
	var blindTooltip = new Spry.Widget.Tooltip('blindMe', '#blindTrigger', {useEffect: 'Blind'});
</script>
<!--

Sample 7: Use the content inside the tooltip

-->
<h4>Tooltips with interactive content</h4>
<p>Sometimes, tooltips contain rich information such as links or forms. In these cases, the tooltip needs to remain so the user can interact with it. Setting the 'closeOnTooltipLeave' will leave the tooltip showing until the mouse leaves the tooltip element.</p>
<pre>&lt;script type=&quot;text/javascript&quot;&gt;
 var surveyTooltip = new Spry.Widget.Tooltip('survey', '#surveyTrigger', {hideDelay: 1500, closeOnTooltipLeave: true, offsetX: &quot;10px&quot;, offsetY:&quot;-10px&quot;});
&lt;/script&gt;</pre>
<span id="surveyTrigger"><b>Mouse over me to complete this form</b></span>
<form id="survey" onsubmit="return analyseForm(this);" class="tooltipContent" action="" method="get">
  <table>
    <tr>
      <td><label for="firstname">First Name:</label></td>
      <td><input type="text" name="firstname" id="firstname"/></td>
    </tr>
    <tr>
      <td><label for="lastname">Last Name:</label></td>
      <td><input type="text" name="lastname" id="lastname"/></td>
    </tr>
    <tr>
      <td colspan="2"><input type="submit" name="submit" value="Send" /></td>
    </tr>
  </table>
</form>
<script type="text/javascript">
// <!--
	analyseForm = function(formEl)
	{
		var inputs = formEl.getElementsByTagName('input');
		var typedValue = ''
		for (var i=0; i < inputs.length; i++)
		{
			if (inputs[i].getAttribute('type').toLowerCase() == 'text'){
				typedValue +=' '+inputs[i].value;
				inputs[i].value = '';
			}
		}
		alert('Your name: \n' + typedValue);
		return false;
	}

// The tooltip constructor
var surveyTooltip = new Spry.Widget.Tooltip('survey', '#surveyTrigger', {hideDelay: 1500, closeOnTooltipLeave: true, offsetX: "10px", offsetY:"-10px"});
// -->
</script>
<hr />
<!--

Sample 8: The tooltip position can follow the mouse 

-->
<h4>Tooltip following the cursor</h4>
<p>Another option for the tooltip is to have it follow the cursor while the cursor is in the trigger area. Setting the followMouse option will activate this.</p>
<pre>&lt;script type=&quot;text/javascript&quot;&gt;
 var followTrigger = new Spry.Widget.Tooltip('following', '#followMe', {followMouse: true});
&lt;/script&gt;</pre>
<div id="followMe" style="border:1px solid black; height: 25px;mouse: pointer; padding-top:12px; padding-left:3px;">The tooltip follows the mouse while the cursor is within the element, in this case noted by the border.</div>
<div id="following" class="tooltipContent">The tooltip follows the mouse...</div>
<script type="text/javascript">
	var followTrigger = new Spry.Widget.Tooltip('following', '#followMe', {followMouse: true});
</script>
<p></p><hr />
<p>Copyright &copy; 2007. Adobe Systems Incorporated. All rights reserved.</p>
</body>
</html>
